<template>
    <p>插</p>
    <p>a: {{ a }}</p>
    <div v-html="spanHtml"></div>
    <p>v-bind</p>

    <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.pn">
    <img v-bind:src="imgUrl">
    <img :src="imgUrl">

    <p>v-on</p>
    <el-button type="primary" @click="addOne">primary</el-button>

    <p>v-if</p>
    <p v-if="isOk"> v-if - isOk- true</p>
    <p v-else>v-if -else- false</p>
    <p v-show="isOk">v-show -isok- ture</p>

    <el-button type="primary" @click="switchIsOk">切换</el-button>

    <p v-if="count == 1">1</p>
    <p v-else-if="count == 2">2</p>
    <p v-else>3</p>

    <el-button type="primary" @click="changeCount(1)">1</el-button>
    <el-button type="primary" @click="changeCount(2)">2</el-button>
    <el-button type="primary" @click="changeCount(3)">3</el-button>

    <p>v-for</p>
    <p v-for="item in todosArr">{{ item }}</p>

    <p v-for="(value,key,index) in todoObj">{{ key }}-{{ value }}-{{ index }}</p>

</template>

<script setup>

import {ref} from 'vue'
const a = ref(0)

const spanHtml = ref('<span> 这是一个span标签</span>')

const imgUrl = ref('//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.pn')

const addOne = ()=>{
    a.value++
}

const switchIsOk = ()=>{
    isOk.value = !isOk.value
}

const changeCount = (num)=>{
    count.value = num
}

const isOk = ref('ture')

const todosArr = ref([

'起床',
'打扫卫生',
'看电视',
'吃饭',
'睡觉'
])

const todoObj =ref([
    '8:00:起床',
    '9:00:打扫卫生',
    '10:00:看电视',
    '11:00:吃饭',
    '12:00:睡觉',
])

</script>